<template>
  <div class="order-details">
    <el-card>
      <div class="clearfix">
        <el-button style="float: right">打印</el-button>
      </div>
      <el-descriptions title="基本信息" :column="3">
        <el-descriptions-item label="订单编码">{{ orderData.orderCode }}</el-descriptions-item>
        <el-descriptions-item label="供应商名称">{{ orderData.supplierName }}</el-descriptions-item>
        <el-descriptions-item label="供应商编码">{{ orderData.supplierCode }}</el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <template #label>订单状态</template>
          <div v-if="Number(orderData.state) == 1">
            <el-icon style="vertical-align: middle; font-size: 30px">
              <svg
                t="1728888035706"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4296"
              >
                <path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="4297" fill="#1afa29" />
              </svg>
            </el-icon>
            <span style="font-size: 15px; vertical-align: middle">全部确认</span>
          </div>
          <div v-if="Number(orderData.state) == 2">
            <el-icon style="vertical-align: middle; font-size: 30px">
              <svg
                t="1728888035706"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4296"
                width="200"
                height="200"
              >
                <path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="4297" fill="#7a35a6" />
              </svg>
            </el-icon>
            <span style="font-size: 15px; vertical-align: middle">部分确认</span>
          </div>
          <div v-if="Number(orderData.state) == 3">
            <el-icon style="vertical-align: middle; font-size: 30px">
              <svg
                t="1728888035706"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4296"
                width="200"
                height="200"
              >
                <path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="4297" fill="#d81e06" />
              </svg>
            </el-icon>
            <span style="font-size: 15px; vertical-align: middle">已拒绝</span>
          </div>
          <div v-if="Number(orderData.state) == 4">
            <el-icon style="vertical-align: middle; color: orange; font-size: 30px">
              <svg
                t="1728888035706"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4296"
                width="200"
                height="200"
              >
                <path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="4297" fill="#e98f36" />
              </svg>
            </el-icon>
            <span style="font-size: 15px; vertical-align: middle">待确认</span>
          </div>
          <div v-if="Number(orderData.state) == 5">
            <el-icon style="vertical-align: middle; font-size: 30px">
              <svg
                t="1728888035706"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4296"
              >
                <path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="4297" fill="#8a8a8a" />
              </svg>
            </el-icon>
            <span style="font-size: 15px; vertical-align: middle">草稿</span>
          </div>
        </el-descriptions-item>

        <el-descriptions-item label="订单金额（不含税）">
          {{ orderData.totalPriceWithoutTax }}
          <template #label>
            订单金额（不含税）
            <el-tooltip
              content="订单金额（不含税）= SUM(订单明细金额（不含税）* 要求的数量)"
              placement="bottom"
              effect="dark"
            >
              <el-icon>
                <svg
                  t="1728889361053"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="5857"
                  width="200"
                  height="200"
                >
                  <path
                    d="M514.048 54.272q95.232 0 178.688 36.352t145.92 98.304 98.304 145.408 35.84 178.688-35.84 178.176-98.304 145.408-145.92 98.304-178.688 35.84-178.176-35.84-145.408-98.304-98.304-145.408-35.84-178.176 35.84-178.688 98.304-145.408 145.408-98.304 178.176-36.352zM515.072 826.368q26.624 0 44.544-17.92t17.92-43.52q0-26.624-17.92-44.544t-44.544-17.92-44.544 17.92-17.92 44.544q0 25.6 17.92 43.52t44.544 17.92zM567.296 574.464q-1.024-16.384 20.48-34.816t48.128-40.96 49.152-50.688 24.576-65.024q2.048-39.936-8.192-74.752t-33.792-59.904-60.928-39.936-87.552-14.848q-62.464 0-103.936 22.016t-67.072 53.248-35.84 64.512-9.216 55.808q1.024 26.624 16.896 38.912t34.304 12.8 33.792-10.24 15.36-31.232q0-12.288 7.68-30.208t20.992-34.304 32.256-27.648 42.496-11.264q46.08 0 73.728 23.04t25.6 57.856q0 17.408-10.24 32.256t-26.112 28.672-33.792 27.648-33.792 28.672-26.624 32.256-11.776 37.888l1.024 38.912q0 15.36 14.336 29.184t37.888 14.848q23.552-1.024 37.376-15.36t12.8-32.768l0-24.576z"
                    p-id="5858"
                    fill="#2fd73a"
                  />
                </svg>
              </el-icon>
            </el-tooltip>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="订单金额（含税）">
          {{ orderData.totalPriceWithTax }}
          <template #label>
            订单金额（含税）
            <el-tooltip
              content="订单金额（含税）= SUM(订单明细金额（含税）* 要求的数量)"
              placement="bottom"
              effect="dark"
            >
              <el-icon>
                <svg
                  t="1728889361053"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="5857"
                  width="200"
                  height="200"
                >
                  <path
                    d="M514.048 54.272q95.232 0 178.688 36.352t145.92 98.304 98.304 145.408 35.84 178.688-35.84 178.176-98.304 145.408-145.92 98.304-178.688 35.84-178.176-35.84-145.408-98.304-98.304-145.408-35.84-178.176 35.84-178.688 98.304-145.408 145.408-98.304 178.176-36.352zM515.072 826.368q26.624 0 44.544-17.92t17.92-43.52q0-26.624-17.92-44.544t-44.544-17.92-44.544 17.92-17.92 44.544q0 25.6 17.92 43.52t44.544 17.92zM567.296 574.464q-1.024-16.384 20.48-34.816t48.128-40.96 49.152-50.688 24.576-65.024q2.048-39.936-8.192-74.752t-33.792-59.904-60.928-39.936-87.552-14.848q-62.464 0-103.936 22.016t-67.072 53.248-35.84 64.512-9.216 55.808q1.024 26.624 16.896 38.912t34.304 12.8 33.792-10.24 15.36-31.232q0-12.288 7.68-30.208t20.992-34.304 32.256-27.648 42.496-11.264q46.08 0 73.728 23.04t25.6 57.856q0 17.408-10.24 32.256t-26.112 28.672-33.792 27.648-33.792 28.672-26.624 32.256-11.776 37.888l1.024 38.912q0 15.36 14.336 29.184t37.888 14.848q23.552-1.024 37.376-15.36t12.8-32.768l0-24.576z"
                    p-id="5858"
                    fill="#2fd73a"
                  />
                </svg>
              </el-icon>
            </el-tooltip>
          </template>
        </el-descriptions-item>
        <el-descriptions-item label="币种">{{ orderData.orderCurrency }}</el-descriptions-item>
        <el-descriptions-item label="采购组织">{{ orderData.purchaseOrg }}</el-descriptions-item>
        <el-descriptions-item label="采购组">{{ orderData.purchaseGroup }}</el-descriptions-item>
        <el-descriptions-item label="订单类型">{{ orderData.orderType }}</el-descriptions-item>
        <el-descriptions-item label="采购企业编码">{{ orderData.companyCode }}</el-descriptions-item>
        <el-descriptions-item label="采购企业名称">{{ orderData.companyName }}</el-descriptions-item>
        <el-descriptions-item label="需要确认">
          <template #label>需要确认</template>
          <div v-if="Number(orderData.needConfirm) == 1">
            <el-icon style="vertical-align: middle; font-size: 30px">
              <svg
                t="1728888035706"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4296"
              >
                <path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="4297" fill="#1afa29" />
              </svg>
            </el-icon>
            <span style="font-size: 15px; vertical-align: middle">是</span>
          </div>
          <div v-if="Number(orderData.needConfirm) == 2">
            <el-icon style="vertical-align: middle; font-size: 30px">
              <svg
                t="1728888035706"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4296"
                width="200"
                height="200"
              >
                <path d="M512 624a112 112 0 1 0 0-224 112 112 0 0 0 0 224z" p-id="4297" fill="#d81e06" />
              </svg>
            </el-icon>
            <span style="font-size: 15px; vertical-align: middle">否</span>
          </div>
        </el-descriptions-item>
        <el-descriptions-item label="需要提供ASN">{{ orderData.publishAsn }}</el-descriptions-item>
        <el-descriptions-item label="订单标识">{{ orderData.orderIdentification }}</el-descriptions-item>
        <el-descriptions-item label="订单备注">{{ orderData.orderNotes }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- <el-card class="box-card" style="margin-top: 20px">
      <div class="clearfix">
        <span style="font-weight: 600; font-size: 20px">订单明细</span>
      </div>
      <el-table :data="materialForm" style="width: 100%">
        <el-table-column prop="maktx_zh" label="行状态" width="180" />
        <el-table-column prop="maktx_zh" label="行项目" width="180" />
        <el-table-column prop="maktx_zh" label="物料名称" width="180" />
        <el-table-column prop="material_code" label="物料编码" width="180" />
        <el-table-column prop="material_spec" label="物料规格" width="180" />
        <el-table-column prop="meins" label="基本计量单位" width="180" />
        <el-table-column prop="batch_id" label="图纸" width="180" />
        <el-table-column prop="packaging_id" label="包装规格" width="180" />
        <el-table-column prop="contract_code" label="合同编号" width="180" />
        <el-table-column prop="number" label="要求的数量" width="180" />
        <el-table-column prop="deliver_date" label="要求的交货日期" width="180" />
        <el-table-column prop="price" label="要求的单价（不含税）" width="180" />
        <el-table-column prop="tax_included_or_not" label="是否含税" width="180" />
        <el-table-column prop="tax_rate" label="税率" width="180" />
        <el-table-column prop="requested_price_with_tax" label="要求的单价（含税）" width="180" />
        <el-table-column prop="factory" label="采购方工厂" width="180" />
        <el-table-column prop="unloading_point" label="卸货点" width="180" />
      </el-table>
    </el-card> -->
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, ElNotification } from 'element-plus'
import { useRoute } from 'vue-router'
const Current = ref(1)
const size = ref(10)

//基本信息
const orderData = reactive({
  id: '',
  orderCode: '',
  supplierName: '',
  supplierCode: '',
  state: '',
  totalPriceWithTax: '',
  totalPriceWithoutTax: '',
  orderCurrency: '',
  purchaseOrg: '',
  purchaseGroup: '',
  orderType: '',
  companyCode: '',
  companyName: '',
  needConfirm: '',
  publishAsn: '',
  orderIdentification: '',
  orderNotes: '',
  operate: ''
})
const route = useRoute()

const fetchData = async () => {
  try {
    const response = await axios({
      method: 'post',
      url: 'http://192.168.100.179:9097/admin/order/query',
      data: {
        current: 1,
        size: 1,
        id: route.query.id
      }
    })
    if (response.data && response.data.data.records.length > 0) {
      const record = response.data.data.records[0]
      // 更新orderData
      orderData.id = record.id
      orderData.orderCode = record.orderCode
      orderData.supplierName = record.supplierName
      orderData.supplierCode = record.supplierCode
      orderData.state = record.state
      orderData.totalPriceWithTax = record.totalPriceWithTax
      orderData.totalPriceWithoutTax = record.totalPriceWithoutTax
      orderData.orderCurrency = record.orderCurrency
      orderData.purchaseOrg = record.purchaseOrg
      orderData.purchaseGroup = record.purchaseGroup
      orderData.orderType = record.orderType
      orderData.companyCode = record.companyCode
      orderData.companyName = record.companyName
      orderData.needConfirm = record.needConfirm
      orderData.publishAsn = record.publishAsn
      orderData.orderIdentification = record.orderIdentification
      orderData.orderNotes = record.orderNotes
      orderData.operate = record.operate
    }
  } catch (error) {
    console.error('获取数据失败:', error)
  }
}
onMounted(() => {
  fetchData()
})
//物料
// const materialForm = ref([])
// const parameter = ref('MAT001')
// const fetchDate = async () => {
//   try {
//     const {
//       data: { data }
//     } = await axios({
//       method: 'get',
//       url: `http://192.168.100.138:9097/admin/orderItems/findByMaterialCode/${parameter.value}`,
//       data: {
//         parament: 'MAT001',
//         current: Current.value,
//         size: size.value
//       }
//     })
//     materialForm.value = data.map((item: any) => {
//       return {
//         maktx_zh: item.maktx_zh,
//         material_code: item.material_code,
//         material_spec: item.material_spec,
//         meins: item.meins,
//         batch_id: item.batch_id,
//         packaging_id: item.packagingId,
//         contract_code: item.contract_code,
//         number: item.number,
//         deliver_date: item.deliver_date,
//         price: item.price,
//         tax_included_or_not: item.tax_included_or_not,
//         tax_rate: item.tax_rate,
//         requested_price_with_tax: item.requested_price_with_tax,
//         factory: item.factory,
//         unloading_point: item.unloading_point
//       }
//     })
//     // total.value = total
//   } catch (error) {
//     console.error('获取数据失败:', error)
//     ElMessage.error('获取数据失败')
//   }
// }
// onMounted(() => {
//   fetchDate()
// })
</script>

<style>
.el-form-item {
  margin: 15px 50px;
}
span.el-descriptions__label {
  font-size: 15px;
}
.el-descriptions__content:not(.is-bordered-label) {
  font-size: 16px;
}
.el-descriptions--small .el-descriptions__header .el-descriptions__title {
  font-size: 20px;
}
.el-table .cell {
  font-size: 15px;
}
span.el-descriptions__label {
  font-size: 15px;
  width: 120px;
}
.el-descriptions--small .el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell {
  padding-bottom: 8px;
  width: 500px;
}
.el-table--fit {
  border-right: 0;
  border-bottom: 0;
  margin: 20px 0 0 0;
}
</style>
